<template>
	<view class="myCustomized">
		<view class="day  disFlex">
			<view @tap="changeIndex(index)" :class="activeIndex == index?'activeColor':''" v-for="(val,index) in dayList " :key="index">{{val}}</view>
		</view>	
		<view class="maxBox">
			<view class=" box10" v-for="(v,i) in list" :key='i' @tap="go(v.id)">
				<view class="list">
					<view class="userInfo">
						<image :src="v.user.headimgurl" mode="" class="userLogo"></image>
						<view class="right disFlex">
							<view class="line1 disFlex one">
								<view>
									<text class="name">{{v.user.nickname}}</text>
									<text class="addr">{{v.city.shortname}}</text>
								</view>
								<view class="lable">{{v.industry.name}}</view>
							</view>
							<view class="infos">
								<view>{{v.create_time}}</view>
								<view style="padding: 0 20rpx;">展位{{v.acreage}}m²</view>
								<view>预算{{v.cost}}元</view>
							</view>
						</view>
					</view>
					<view class="content ">
						<view class="word line3">{{v.content}}</view>
						<view class="allWord">全文</view>
					</view>
					<view class="imgs">
						<image v-for="(item,i) in v.img" :key='i' :src="item" mode=""></image>
					</view>
					<view class="timeBox disFlex" v-if="activeIndex == 0">
						<view class="statusBox">
							<text class="status">招标中</text>
							<text class="word">({{v.order_count}}家工厂投标)</text>
						</view>
						<view class="time">截至时间：{{v.deadline}}</view>
					</view>
					<view class="timeBox disFlex" v-if="activeIndex == 1">
						<view class="statusBox">
							<text class="status">已开标</text>
						</view>
						<view class="time">开始时间：{{v.create_time}}</view>
					</view>
					<view class="timeBox disFlex" v-if="activeIndex == 2">
						<view class="statusBox">
							<text class="status">已流标</text>
						</view>
						<view class="time">截至时间：{{v.deadline}}</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dayList:['招标中','已开标','已流标'],
				activeIndex:0,
				list:[],
			}
		},
		onLoad(option) {
			this.activeIndex = option.type;
			this.changeIndex(this.activeIndex)
		},
		methods: {
			changeIndex (index) {
				let typedata = {
					type:index
				}
				this.activeIndex = index;
				this.http('/api/tender_order/invitation', 'post',typedata , )
					.then((res) => {
						this.list = res.data.data
						console.log(res.data.data)
					})
			},
			go (id) {
				if (this.activeIndex == 0) {
					this.getnav(this.router(`bid?id=${id}`));
				}else if (this.activeIndex == 1) {
					this.getnav(this.router(`alreadyBid?id=${id}`));
				}else if (this.activeIndex == 2) {
					this.getnav(this.router(`loseBid?id=${id}`));
				}
			}
		}
	}
</script>

<style lang="less">
	.myCustomized{
		.day{
			padding: 0 116rpx;
			padding-top: 50rpx;
			view{
				font-size:30rpx;
				// color:rgba(153,153,153,1);
			}
			.activeColor{
				color: #2291FF;
				position: relative;
				&::after{
					content: '';
					position: absolute;
					left: 0;
					bottom: -24rpx;
					z-index: 1;
					width: 100%;
					height: 8rpx;
					border-radius: 4px;
					background-color: #2291FF;
				}
			}
		}
		.maxBox{
			padding-top: 32rpx;
			.list{
				padding: 40rpx;
				.userInfo{
					display: flex;
					align-items: center;
					.userLogo{
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}
					.right{
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						align-items: flex-start;
						height: 90rpx;
						padding-left: 20rpx;
						flex: 1;
						.one{
							width: 100%;
							.name{
								font-size: 36rpx;
								font-weight: bold;
							}
							.addr{
								font-size: 24rpx;
								padding-left: 8rpx;
								color: #BEC9D7;
							}
							.lable{
								height:40rpx;
								background:rgba(255,241,229,1);
								border-radius:20rpx 0px 20rpx 20rpx;
								padding: 0 15rpx;
								font-size:24rpx;
								color:rgba(254,114,3,1);
								line-height:40rpx;
							}
						}
						.infos{
							display: flex;
							view{
								font-size:24rpx;
								color:rgba(190,201,215,1);
							}
						}
					}
				}
				.content{
					margin-top: 40rpx;
					display: flex;
					flex-wrap: wrap;
					.allWord{
						color: #2291FF;
						width: 60rpx;
					}
				}
				.imgs{
					display: grid;
					grid-template-columns: repeat(3, 210rpx);
					grid-column-gap: 20rpx;
					grid-row-gap: 20rpx;
					margin-top: 40rpx;
					image{
						width: 100%;
						height: 210rpx;
					}
				}
				.timeBox{
					margin-top: 40rpx;
					.statusBox{
						display: flex;
						align-items: center;
						.status{
							color: #FE7203;
							font-size: 32rpx;
							font-weight: bold;
						}
						.word{
							font-size: 24rpx;
							color: #BEC9D7;
						}
					}
					.time{
						font-size: 24rpx;
						color: #BEC9D7;
					}
				}
			}
		}
		
	}
</style>
